{% extends "hs-base.html" %}
{% block div %}

    <div class="content">
                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-12">
                                <div class="card-box">
                                    <h4 class="header-title mb-4">系统环境状况概览</h4>

                                    <div class="row">
                                        <div class="col-xl-3">
                                            <div class="card-box mb-0 widget-chart-two">
                                                <div class="widget-chart-two-content">
                                                    <p class="text-muted mb-0 mt-2"> 升级次数（当日）</p>
                                                    <h3 class="">   {{ up_times }} 次 </h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="card-box mb-0 widget-chart-two">
                                                <div class="widget-chart-two-content">
                                                    <p class="text-muted mb-0 mt-2"> 服务器数量 </p>
                                                    <h3 class=""> {{ pro_num }} 台 </h3>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="col-xl-3">
                                            <div class="card-box mb-0 widget-chart-two">

                                                <div class="widget-chart-two-content">
                                                    <p class="text-muted mb-0 mt-2"> 使用人数 </p>
                                                    <h3 class=""> {{ user_num }} 人</h3>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-lg-6 col-xl-2">
                                            <div class="card-box mb-0 widget-chart-two">

                                                <div class="widget-chart-two-content">
                                                    <p class="text-muted mb-0 mt-2"> 平均升级时间 </p>
                                                    <h3 class=""> {{ use_time_avg }} 秒</h3>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <!-- end row -->
                                </div>
                            </div>

                        </div>
                        <!-- end row -->


                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card-box">
                                    <h4 class="header-title">升级状况折线图</h4>

                                    <div id="website-stats" style="height: 350px;" class="flot-chart mt-5"></div>

                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card-box">
                                    <h4 class="header-title">24小时升级分布</h4>

                                    <div id="combine-chart">
                                        <div id="combine-chart-container" class="flot-chart mt-5" style="height: 350px;">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end row -->


                        <div class="row">
                            <div class="col-12">
                                <div class="card-box">
                                    <h4 class="m-t-0 header-title">环境信息</h4>
                                    <p class="text-muted m-b-30 font-13">
                                        显示所有环境信息
                                    </p>

                                    <div class="mb-3">
                                        <div class="row">
                                            <div class="col-12 text-sm-center form-inline">
                                                <div class="form-group mr-2">
                                                    <select id="demo-foo-filter-status" class="custom-select">
                                                        <option value="">显示所有</option>
                                                        <option value="active">开启</option>
                                                        <option value="disabled">停止</option>
                                                        <option value="suspended">升级中</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <input id="demo-foo-search" type="text" placeholder="Search" class="form-control" autocomplete="on">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <table id="demo-foo-filtering" class="table table-striped table-bordered toggle-circle m-b-0" data-page-size="7">
                                        <thead>
                                        <tr>
                                            <th data-hide="phone">环境名称</th>
                                            <th data-toggle="true">环境类别</th>
                                            <th data-toggle="true">环境地址及端口号</th>
                                            <th data-toggle="true">所属小组</th>
                                            <th data-hide="phone">创建日期</th>
                                            <th data-hide="phone, tablet">创建人</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        {% for server_list in server_lists %}
                                            <tr>
                                                <td>{{ server_list[0] }}</td>
                                                <td>{{ server_list[1] }}</td>
                                                <td>{{ server_list[2] }}:{{ server_list[3] }}</td>
                                                <td>{{ server_list[6] }}</td>
                                                <td>{{ server_list[4] }}</td>
                                                <td>{{ server_list[5] }}</td>
                                            </tr>
                                        {% endfor %}

                                        </tbody>
                                        <tfoot>
                                        <tr class="active">
                                            <td colspan="6">
                                                <div class="text-right">
                                                    <ul class="pagination pagination-split justify-content-end footable-pagination m-t-10 m-b-0"></ul>
                                                </div>
                                            </td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->




                    </div> <!-- container -->

                </div>

{% endblock %}